認識JavaScript

2025 iThome 鐵人賽

DAY 1

Modern Web

30天絕望倒數JavaScript系列第 1 篇

17th鐵人賽

ysljs

團隊nutc imac

2025-09-15 16:37:50

167 瀏覽

分享至

JavaScript（簡稱 JS）是一種跨平台、物件導向、直譯式的程式語言，最初由 Netscape 在 1995 年推出，用來讓網頁具備互動性。它與 HTML、CSS 並列為前端開發的三大核心技術，但應用範圍早已超越瀏覽器。(不是JAVA只是相近)

直譯執行：不需編譯，瀏覽器或執行環境會直接解讀並執行程式碼
動態型別：變數不需事先宣告型別，可在執行時改變
事件驅動：可監聽並回應使用者操作（點擊、輸入、滑鼠移動等）
原型繼承：透過 prototype 機制實現物件繼承，而非傳統類別繼承

常見應用

領域	範例
前端開發	操作 DOM、表單驗證、動畫效果
後端開發	使用 Node.js 建立 API 或 Web 服務
行動應用	React Native、Ionic 等跨平台框架
桌面應用	Electron 製作跨平台桌面軟體

簡單範例

JavaScript 可以更改 HTML 內容

找到一個 HTML 元素（id="demo"），並將元素內容（innerHTML）改為「Hello JavaScript」，getElementById()也是方法之一

<!DOCTYPE html>
<html>
<body>
    
<p id="demo">Hello</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>更改</button>

</body>
</html>

Adobe Express - 錄製內容 2025-08-25 132107 (1)

2.JavaScript 改變 HTML 屬性值

JavaScript 變更了標籤的 (source) 屬性的值

<!DOCTYPE html>
<html>
<body>


<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">開</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">關</button>

</body>
</html>

Adobe Express - 錄製內容 2025-08-25 132107 (2)

3.JavaScript 改變 HTML 樣式（CSS）

修改 HTML 元素的樣式，其實就是修改該元素的 style 屬性內容，因此可視為改變 HTML 屬性的一種形式。

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">變大</button>

</body>
</html>

錄製內容 2025-08-25 132107 (2)

4.JavaScript 隱藏 HTML 元素

透過改變display樣式來隱藏 HTML 元素，也可來顯示 HTML 元素

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">隱藏</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">顯示
</button>
</body>
</html>